<template>
    <!-- maodian -->
    <view class="py-flow-record-item">
        <!-- <uni-section type="line" :title="flow.taskName"></uni-section> -->
        <view class="py-title">
            <!-- 已完成节点 -->
            <view v-if="flow.finishTime">
                <uni-icons custom-prefix="iconfont" type="py-icon-flow-completed" :size="14"
                    color="#11A983"></uni-icons>
                <text class="py-text">{{flow.taskName}}</text>
            </view>
            <!-- 未完成节点 -->
            <view v-else>
                <uni-icons custom-prefix="iconfont" type="py-icon-flow-todo" :size="14"
                    color="rgb(179, 189, 187)"></uni-icons>
                <text class="py-text">{{flow.taskName}}</text>
            </view>


        </view>

        <view class="border">
            <view class="content">
                <view v-if="flow.assigneeName" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-user" :size="14"></uni-icons>
                        <text>办理人</text>
                    </view>
                    <text>{{flow.assigneeName}}</text>
                </view>
                <view v-if="flow.deptName" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-department" :size="14"></uni-icons>
                        <text>部门</text>
                    </view>
                    <text>{{flow.deptName}}</text>
                </view>

                <view v-if="fillNode">
                    <view class="py-row">
                        <view>
                            <uni-icons custom-prefix="iconfont" type="py-icon-flow-user" :size="14"></uni-icons>
                            <text>办理人</text>
                        </view>
                        <text>{{firstAssigneeName}}</text>
                    </view>
                    <view class="py-row">
                        <view>
                            <uni-icons custom-prefix="iconfont" type="py-icon-flow-department" :size="14"></uni-icons>
                            <text>部门</text>
                        </view>
                        <text>{{firstDeptName}}</text>
                    </view>
                </view>


                <view v-if="flow.candidate && !start && !fillNode" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-candidate" :size="14"></uni-icons>
                        <text>候选办理</text>
                    </view>
                    <text>{{flow.candidate}}</text>
                </view>
                <view v-if="flow.createTime" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-calendar" :size="14"></uni-icons>
                        <text>接收时间</text>
                    </view>
                    <text>{{flow.createTime}}</text>
                </view>
                <view v-if="flow.finishTime" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-calendar" :size="14"></uni-icons>
                        <text>处理时间</text>
                    </view>
                    <text>{{flow.finishTime}}</text>
                </view>
                <view v-if="flow.duration" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-time" :size="14"></uni-icons>
                        <text>耗时</text>
                    </view>
                    <text>{{flow.duration}}</text>
                </view>
                <view v-if="flow.comment" class="py-row">
                    <view>
                        <uni-icons custom-prefix="iconfont" type="py-icon-flow-opinion" :size="14"></uni-icons>
                        <text>处理意见</text>
                    </view>
                    <text>{{flow.comment.comment}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        name: "PyFlowRecordItem",
        props: {
            // 是否为初始节点
            start: {
                type: Boolean,
                default: false
            },

            // 除初始节点以外的填写节点
            // 比如：申请退回时，重新填写节点
            fillNode: {
                type: Boolean,
                default: false
            },

            // 初始节点填报人姓名
            firstAssigneeName: {
                type: String,
                default: ""
            },

            // 初始节点填报人部分
            firstDeptName: {
                type: String,
                default: ""
            },

            // 流程数据
            flow: {
                type: Object,
                default() {
                    return {}
                }
            }
        }
    }
</script>

<!-- maodian -->
<style lang="css" scoped>
    .py-flow-record-item {
        margin-bottom: 15px;
    }

    .py-flow-record-item .py-title {
        color: #333;
        font-size: 14px;
        padding: 10px
    }

    .py-flow-record-item .py-title .py-text {
        margin-left: 5px;
        font-weight: 700;
    }

    .py-flow-record-item .py-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* border-bottom: 1px solid #d6d7d9; */
        margin: 2px 0;
    }

    .py-flow-record-item .border {
        border-radius: 4px;
        border: 1px solid #EBEEF5;
        padding: 5px;
        background-color: white;
    }

    .py-flow-record-item .content {
        border: 1px solid #EBEEF5;
        padding: 5px;
        color: #606266;
    }
</style>